<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商城订单</title>
    <link rel="stylesheet" href="/static/order/list/css/index.css">
    <style media="screen">
        * {
            font-family: "微软雅黑";
        }
    </style>
</head>

<body>
<!-- 头部导航部分保持不变 -->
<div id="nav">
    <nav>
        <div class="myjd">
            <h3>我的助农商城</h3>
            <button onclick="location.href='http://mall.wlp.com/home'">返回助农商城首页</button>
        </div>
        <ul class="nav_ul">
            <li>首页</li>
            <li>消息</li>
            <li>
                <a href="http://auth.wlp.com/login.html" style="color: white" >
                    [[${session.loginUser !=null?session.loginUser.nickname:'你好，请登录!'}]]
                </a>
            </li>
        </ul>
        <div class="right">
            <ul class="shop">
                <li><i class="shop_che"></i>我的购物车 >
                    <ol>
                        <li>
                            <img src="/static/order/list/img/shop.png" alt="">
                            <div>购物车中还没有商品，赶紧选购吧</div>
                            <div style="clear:both;"></div>
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
        <div style="clear:both;"></div>
    </nav>
</div>
<div style="clear:both;"></div>
<div id="big">
    <div id="bigLeft">
        <ul>
            <h5>订单中心</h5>
            <li style="color:#E4393C;font-weight:800;">我的订单</li>
        </ul>
        <ul>
            <h5>设置</h5>
            <li>个人信息</li>
            <li>收货地址</li>
            <li><img src="/static/order/list/img/59126ae3N1b306e2c.jpg" alt=""></li>
        </ul>
    </div>
    <div id="bigRight">
        <div class="myOrder">
            <p>我的订单</p>
        </div>
        <div class="allBig">
            <div class="allOrder">
                <ul class="allOrderTop">
                    <li>
                        <ol>
                            <li>全部订单</li>
                            <div style="clear:both;"></div>
                        </ol>
                    </li>
                </ul>
            </div>
            <div class="details">
                <ul class="detailsUl">
                    <div class="detailsUlDiv">
                        <li class="detailsLi">订单详情</li>
                        <div style="clear:both;"></div>
                    </div>
                    <li class="detailsLi1">收货人</li>
                    <li class="detailsLi1">金额</li>
                    </li>
                    <li class="detailsLi1">操作</li>
                    <div style="clear:both;"></div>
                </ul>
            </div>
            <table class="table" th:each="order : ${orders}">
                <tr>
                    <td colspan="7" style="background:#F7F7F7" >
                        <span style="color:#AAAAAA" ></span>
                        <span><ruby style="color:#AAAAAA">订单号:</ruby> <span th:text="${order.orderSn}"></span></span>
                        <span th:text="${order.spuBrand}">慕熙威尔官方旗舰店<i class="table_i"></i></span>
                        <i class="table_i5 isShow"></i>
                    </td>
                </tr>
                <tr class="tr">
                    <td colspan="3">
                        <img th:src="${order.spuPic}" alt="" class="img" style="width: 40px;">
                        <div>
                            <p th:text="${order.skuName}">MUXIWEIERPU皮手套男冬季加绒保暖户外骑<br />
                                车开车触摸屏全指防寒全指手套 黑色 均码</p>
                        </div>
                        <div style="margin-left:15px;" th:text="${order.skuQuantity}">x1</div>
                        <div style="clear:both;"></div>
                    </td>
                    <td th:text="${order.receiverName}">张三<i><i class="table_i1"></i></i></td>
                    <td style="padding-left:10px;color:#AAAAB1;">
                        <p style="margin-bottom:5px;" th:text="'总额 ￥' + ${order.payAmount==null?'未知金额':order.payAmount}">总额 ￥26.00</p>
                        <hr style="width:90%;">
                        <p>在线支付</p>
                    </td>
                    <td>
                        <ul>
                            <li style="color:#71B247;" th:text="${order.status == 0? '等待付款' : (order.status == 1? '等待收货' : (order.status == 2? '已完成' : '已取消'))}">等待收货</li>
                            <li style="margin:4px 0;" class="hide"><i class="table_i2"></i>跟踪<i class="table_i3"></i>
                                <div class="hi">

                                </div>
                            </li>
                            <li class="tdLi">订单详情</li>
                        </ul>
                    </td>
                    <td>
                        <button >确认收货</button>
                        <p style="margin:4px 0; ">取消订单</p>
                        <p>催单</p>
                    </td>
                </tr>
            </table>
            <div class="order_btm">
                <div>
                    <button>上一页</button>
                    <span>1</span>
                    <button>下一页</button>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
<div class="footer">
    <div style="clear: both"></div>
</div>
</body>
<script src="/static/order/list/js/jquery-3.1.1.min.js"></script>
<script src="/static/order/list/js/index.js"></script>
</html>